<template>
	<view class="">
		<view class="container">
			<view class="list">
				<view class="item">
					<view class="t">发布类型</view>
					<view class="b1 u-flex u-col-center u-row-between">
						<view v-if="params.type == 1" class="i" :class="{ on: params.type == 1 }">我要收购</view>
						<view v-if="params.type == 2" class="i" :class="{ on: params.type == 2 }">我要出售</view>
					</view>
				</view>
				<view class="item">
					<view class="t">商品名称</view>
					<view class="b">
						<input
							type="text"
							maxlength="20"
							v-model="params.name"
							placeholder="请输入"
							:disabled="objdata.from == 'up' && objdata.status_up == 3 && objdata.status == 3"
							placeholder-style="color:#D1CDCD;font-size: 28rpx;"
						/>
					</view>
					<view class="searchbtns">
						<view class="btns">
							<view class="itmes flex" v-for="(item, index) in searchList" :key="index" @click="toSearch(item.word)">
								<image  :src="item.icon" mode="aspectFill"></image>
								<view class="">
									{{ item.word }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item" v-if="params.type == 2">
					<view class="t">价格模式</view>
					<view class="bbtns u-flex">
						<view v-if="params.priceMode == 1" class="bbtn" :class="params.priceMode == 1 ? 'actbbtn' : ''">买家出价</view>
						<view v-if="params.priceMode == 2" class="bbtn" :class="params.priceMode == 2 ? 'actbbtn' : ''">卖家定价</view>
					</view>
				</view>
				<view class="item">
					<view class="t">
						价格
						<text>(MHB)</text>
					</view>
					<view class="b" v-if="params.priceMode != 1">
						<input
							:disabled="objdata.from == 'up' && objdata.status_up == 3 && objdata.status == 3"
							type="number"
							v-model="params.price"
							placeholder="请输入"
							maxlength="9"
							placeholder-style="color:#D1CDCD;font-size: 28rpx;font-weight: 400;"
							class="nn"
						/>
						<view class="big" v-if="params.price">
							{{ params.price | numberToChinese(params.priceUnit) }}
						</view>
					</view>
					<view class="tss" v-else>买家出价</view>
				</view>
				<view class="item">
					<view class="t">图片</view>
					<view class="img" v-if="params.image" @click="upload">
						<image :src="params.image" mode="aspectFill" class="i1"></image>
						<image @click.stop="params.image = ''" src="@/static/del.png" mode="aspectFill" class="i3" v-if="params.image && objdata.from != 'up'"></image>
					</view>
					<view class="img" v-else @click="upload">
						<image src="@/static/up2.png" mode="aspectFill" class="i2"></image>
					</view>
				</view>
				<view class="item">
					<view class="t">上架天数 {{ params.upday }}</view>
					<view class="b3">
						<slider
							:disabled="objdata.from == 'edit' && objdata.status_up != 3 && objdata.status != 4"
							:min="1"
							:max="30"
							@change="sliderChange"
							step="1"
							activeColor="#FF6F07"
							backgroundColor="#D1D1D6"
							block-color="#fff"
							block-size="18"
							:value="params.upday"
						/>
						<view class="i i1">1</view>
						<view class="i i2" :style="{ left: left + '%' }">
							{{ params.upday }}
						</view>
						<view class="i i3">30</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn" @click="gopage()">
			<view class="cont">
				<view class="btn">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
import { infoQuotationList, gethot } from '@/common/http.api.js';
export default {
	data() {
		return {
			left: 3,
			params: {
				image: '',
				name: '',
				price: '',
				type: '',
				upday: 1
			},
			objdata: {},
			searchList: []
		};
	},
	onLoad(option) {
		// 修改报价页面
		this.objdata = JSON.parse(decodeURIComponent(option.obj));
		if (this.objdata.from == 'up') {
			uni.setNavigationBarTitle({
				title: '重新上架'
			});
		}
		this.getInfo();
		this.getddd();
	},
	methods: {
		toSearch(name) {
			this.params.name = name;
		},

		getddd() {
			gethot().then((res) => {
				if (res.code == 200) {
					this.searchList = res.data;
				}
			});
		},
		getInfo() {
			infoQuotationList(this.objdata.id).then((res) => {
				if (res.code == 200) {
					this.params.id = res.data.id;
					this.params.type = res.data.type;
					this.params.name = res.data.name;
					this.params.price = res.data.price;
					this.params.image = res.data.image;
					this.params.upday = res.data.last.upday;
					this.params.priceUnit = res.data.priceUnit;
					this.params.priceMode = res.data.priceMode;
					this.left = (this.params.upday / 30) * 100;
				}
			});
		},
		upload() {
			if (this.objdata.from == 'up' && this.objdata.status_up == 3 && this.objdata.status == 3) {
				this.$modal.msg('不可修改');
				return;
			}
			this.$uploadone().then((res) => {
				this.params.image = res;
			});
		},
		gopage(url) {
			if (!this.params.name) {
				this.$modal.msg('请输入商品名称');
				return;
			}
			if (this.params.priceMode == 2) {
				if (!this.params.price) {
					this.$modal.msg('请输入价格');
					return;
				}
			}
			if (!this.params.upday) {
				this.$modal.msg('请选择天数');
				return;
			}
			if (this.objdata.from == 'up') {
				let obj = Object.assign(this.objdata, this.params);
				uni.navigateTo({
					url: '/pages/user/order/yesorder?obj=' + encodeURIComponent(JSON.stringify(obj))
				});
			} else {
				let obj = Object.assign(this.objdata, this.params);
				uni.navigateTo({
					url: '/pages/user/order/yesorder?obj=' + encodeURIComponent(JSON.stringify(obj))
				});
			}
		},
		changeType(i) {
			if (this.objdata.from == 'up' && this.objdata.status_up == 3 && this.objdata.status == 3) {
				this.$modal.msg('不可修改');
				return;
			}
			this.params.type = i;
		},
		sliderChange(e) {
			this.params.upday = e.detail.value;
			this.left = (this.params.upday / 30) * 100;
		}
	}
};
</script>

<style lang="scss" scoped>
$color: #ff6f07;

.container {
	padding: 20rpx 30rpx;

	.on {
		opacity: 1;
	}

	.list {
		padding-bottom: 200rpx;
.searchbtns {
			overflow: auto;
			height: 300rpx;
			.btns {
				display: flex;
				flex-wrap: wrap;
				.itmes {
					height: 60rpx;
					background: #f2f2f2;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 0rpx 15rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #777777;
					line-height: 60rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					image {
						width: 44rpx;
						height: 44rpx;
						border-radius: 8rpx;
						margin-right: 14rpx;
					}
				}
			}
		}
		.item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			position: relative;
			.bbtns {
				margin-top: 20rpx;
				.bbtn {
					width: 200rpx;
					height: 60rpx;
					background: #f9f9f9;
					border-radius: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #11192d;
					text-align: center;
					line-height: 60rpx;
					margin-right: 40rpx;
				}
				.actbbtn {
					background: linear-gradient(180deg, #ffbf7d 0%, #ff8935 100%);
					color: #ffffff;
				}
			}
			.btns {
				display: flex;
				flex-wrap: wrap;
				.itmes {
					height: 48rpx;
					background: #f2f2f2;
					border-radius: 8rpx;
					padding: 0rpx 15rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #777777;
					line-height: 48rpx;
					margin-top: 15rpx;
					margin-right: 20rpx;
				}
				// .actitmes{
				// 	background: #FF6F07;
				// 	color: #FFFFFF;
				// }
			}
			.s-list {
				position: absolute;
				left: 2rpx;
				right: 2rpx;
				top: 140rpx;
				background-color: #fff;
				border-radius: 0 0 20rpx 20rpx;
				box-shadow: 0rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.25);
				z-index: 999;
				border: 2rpx solid #f4f4f4;
				padding: 0 30rpx;

				.i {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #979797;
				}
			}
			.tss{
				font-size: 28rpx;
				color: #979797;
			}

			.b3 {
				margin-top: 20rpx;
				position: relative;
				padding-bottom: 30rpx;

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					top: 8rpx;
					width: 4rpx;
					height: 20rpx;
					margin-left: -10rpx;
					background-color: $color;
				}

				.i {
					color: #11192d;
					font-size: 28rpx;
				}

				.i1 {
					position: absolute;
					left: 0;
					top: 0;

					&::after {
						content: '';
						position: absolute;
						left: 30rpx;
						top: 8rpx;
						width: 4rpx;
						height: 20rpx;
						background-color: $color;
					}
				}

				.i2 {
					position: absolute;
					// right: 0;
					top: 45rpx;
					margin-left: -20rpx;
				}

				.i3 {
					position: absolute;
					right: -10rpx;
					top: 0;

					&::after {
						content: '';
						position: absolute;
						right: 40rpx;
						top: 8rpx;
						width: 4rpx;
						height: 20rpx;
						background-color: $color;
					}
				}
			}

			.t {
				font-size: 32rpx;
				color: #11192d;
				height: 50rpx;
				line-height: 50rpx;

				text {
					font-size: 20rpx;
				}
			}

			.img {
				margin-top: 20rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				border: 2rpx solid #d1cdcd;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				position: relative;

				.i1 {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					overflow: hidden;
				}

				.i2 {
					width: 48rpx;
					height: 48rpx;
				}

				.i3 {
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.b1 {
				margin-top: 20rpx;

				.i {
					width: 300rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #f9f9f9;
					border-radius: 12rpx;
					color: #d1cdcd;
					font-size: 28rpx;
					border: 1px solid #f9f9f9;
				}

				.on {
					background: #fff2e9;
					border: 1px solid $color;
					color: $color;
				}
			}

			.b {
				margin-top: 10rpx;

				input {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					color: #11192d;
					font-size: 28rpx;
				}

				textarea {
					width: 100%;
					height: 80rpx;
					line-height: 40rpx;
					color: #11192d;
					font-size: 28rpx;
				}

				.nn {
					font-family: 'DINB';
					font-size: 36rpx;
					font-weight: 600;
				}

				.big {
					line-height: 28rpx;
					height: 28rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
					text-align: left;
				}
			}
		}
	}
}
</style>
